<template>
	<div class="kaochangguanli flex">
    <left></left>
    <div style="width: calc(100vw - 280px); height: calc(100vh - 40px); overflow: auto; padding: 20px;">


      <div style="margin-bottom: 20px;"><el-button @click="add" type="primary">新增游戏</el-button></div>

      <el-table :data="tableData"  border  style="width: 100%">
          <el-table-column prop="name" label="游戏名称"></el-table-column>
          <el-table-column prop="sharing_ratio" label="比例(百分之)"></el-table-column>
          <el-table-column label="图片">
            <template slot-scope="scope">
              <img :src="scope.row.img" style="max-width: 100px; max-height: 100px;">
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="bianji(scope.row)" type="text">编辑</el-button>
              <el-button @click="shanchu(scope.row)" type="text">删除</el-button>
            </template>
          </el-table-column>
      </el-table>
      <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total,jumper" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>

    </div>

    <el-dialog  title="游戏管理"  :visible.sync="log"  width="700px" :close-on-click-modal="false" :close-on-press-escape="false">

      <div style="padding: 5px 10px;" class="flexc">
        <div style="width: 180px; text-align: right; margin-right: 30px;">添加游戏：</div>
        <el-input v-model="all.name" style="width: 350px; " placeholder="请输入游戏名称"></el-input>
      </div>
      <div style="padding: 5px 10px;" class="flexc">
        <div style="width: 180px; text-align: right; margin-right: 30px;">app_id：</div>
        <el-input v-model="all.app_id" style="width: 250px; " placeholder="请输入app_id"></el-input>
      </div>
      <div style="padding: 5px 10px;" class="flexc">
        <div style="width: 180px; text-align: right; margin-right: 30px;">app_secret：</div>
        <el-input v-model="all.app_secret" style="width: 250px; " placeholder="请输入app_secret"></el-input>
      </div>
      <div style="padding: 5px 10px;" class="flexc">
        <div style="width: 180px; text-align: right; margin-right: 30px;">介绍：</div>
        <el-input v-model="all.desc" style="width: 350px; " type="textarea" rows="5" placeholder="请输入介绍"></el-input>
      </div>
      <div style="padding: 5px 10px;" class="flexc">
        <div style="width: 180px; text-align: right; margin-right: 30px;">宣传图：</div>
        <div><chuantu @getimgid="getimgid3" :imgid="all.img" v-if="relo" :zi="'上传照片'" style="width: 200px; height: 200px;"></chuantu></div>
      </div>
      <div style="padding: 5px 10px;" class="flexc">
        <div style="width: 180px; text-align: right; margin-right: 30px;">分成比例：</div>
        <el-input v-model="all.sharing_ratio" style="width: 350px; " placeholder="用户分成拿多少"></el-input>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" round @click="fabu">保存</el-button>
      </div>

    </el-dialog>


	</div>
</template>

<script>
  import chuantu from '../../components/chuantu.vue'
  import left from '../left.vue'
	export default {
		name: 'kaochangguanli',
    components:{
      left,chuantu
    },
		data() {
			return {
        tableData:[],
        search:{
          name:"",
          id:""
        },
        relo:true,
        total:0,
        log:false,
        all:{
          id:"",
          name:"",
          img:"",
          sharing_ratio:"",
          desc:""
        }
			}
		},
		created() {
      this.getlist()

		},
		mounted() {

		},
		methods: {
      getimgid3:function(val){
        this.all.img = val
      },
      jinru:function(item){
        this.$router.push('/xinwen/xinwen?id='+item.id+'&name='+item.name)
      },
      add:function(){
        this.all ={
          id:"",
          name:"",
          img:"",
          sharing_ratio:"",
          desc:""
        }
        this.log = true
      },
      shanchu:function(item){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post(this.IP_URL+'/admin/game/del',{id:item.id}).then((response)=>{
          	if (response.data.msg.code == 0) {
          		this.$message.success('操作成功');
              this.getlist()
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        })
      },
      bianji:function(item){
        this.all = JSON.parse(JSON.stringify(item))
        this.log = true
        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
        })
      },
      fabu:function(){
        axios.post(this.IP_URL+'/admin/game/save',this.all).then((response)=>{
        	if (response.data.msg.code == 0) {
        		this.$message.success('操作成功');
            this.log = false
            this.getlist()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      getlist:function(){
        axios.get(this.IP_URL+'/admin/game/list',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
        		this.tableData = response.data.data.data
            this.total = response.data.data.total
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },
		}
	}
</script>


<style scoped >

</style>
